<template>
  <div class="home">
    <h1>vue+ts+setup+volar</h1>
    <button @click="addCount(2)">{{count}}</button>
    <button>{{num}}</button>
    <button v-if="flag">{{str}}</button>
    <div v-for="(item,index) in list" :key="index">{{item}}</div>
    <step :value="num" @change="num=$event" :max="200"></step>
    <div 
    :style="{width:num+'px',height:num+'px',borderRadius:num+'px',border:'1px solid red'}">circle</div>
  </div>
</template>

<script lang="ts" setup>
import step from '@/components/StepCom.vue'
// javascript数据类型：number，string，boolean，undefined，null
// 引用类型：数组，对象，function
// ts：any任意类型,void没有返回值,interface接口
// 一、声明变量
import {ref,reactive} from 'vue'
const count = ref<number>(10);
const num = ref(5); 
const str = ref<string>("i love ts")
const flag = ref<boolean>(true)
// 定义函数
function addCount(n:number):void{
  count.value+=n;
}
// 声明一个接口
interface Iuser {
  name:string,
  age:number,
  pet:undefined|string
}
const list = reactive<Iuser>({name:"mumu",age:18,pet:"dog"})
 
</script>
